<template>
	<view class="findPeople">
		<uni-tabchange :tabArr="tabArr" :isFixed="true" :activeTab="activeTab" @tabChangeSuccess="tabChangeSuccess"></uni-tabchange>
		<template v-for="(item,index) in listData">
			<view class="peopleOne" :key="index" @click.stop="btnOper('detail',item)">
				<view class="info font14">
					<view class="flex alignCenter">
						<view class="avater">
							<image class="" :src="item.createUserAvatar || 'https://image.alhelp.net/uploads/20231104/4d491857ac50d21ebbcb25ff5bc254f8.png'" mode="widthFix"></image>
						</view>
						<view class="flex alignCenter justConBetween infoName">
							<view class="">
								<view class="bold font16 nickName">{{item.createUserName || '匿名用户'}}</view>
								<view class="font12 color666 hiddenOneline">{{item.createTime}}</view>
							</view>
							<!-- 由于后端是在未确定揭榜者之前都可以下所以前端保持一致 && item.totalObject.entrustTotal==0 && item.totalObject.relayTotal==0 && item.totalObject.unveiledTotal==0 -->
							<view class="flex alignCenter editBox" v-if="activeTab==0 && item.state<2">
								<image src="@/static/image/icons/down.png" mode="widthFix" @click.stop="operClick('off',item)"></image>
								<image src="@/static/image/toolbox/edit.png" v-if="item.totalObject.entrustTotal==0 && item.totalObject.relayTotal==0 && item.totalObject.unveiledTotal==0" mode="widthFix" @click.stop="operClick('edit',item)"></image>
								<!-- <view class="noWidthBtn">下架</view>
								<view class="noWidthBtn">编辑</view> -->
							</view>
						</view>
					</view>
					<view class="bold font16 flex alignCenter justConBetween findTitle">
						<view class="hiddenOneline">{{item.title}}</view>
						<view class="colorRed">￥{{item.bounty}}</view>
					</view>
					<view class="flex alignCenter colorBlue tag">
						<text>{{item.schoolName}}</text>
						<text>{{item.majorName}}</text>
					</view>
					<view class="flex alignCenter flexWrap operBtn noClickBtn" v-if="activeTab==0">
						<view class="noWidthBtn" @click.stop="btnOper('receive',item)">揭榜<text class="mathMagrin">{{item.totalObject.unveiledTotal}}</text></view>
						<view class="noWidthBtn" @click.stop="btnOper('share',item)">接力者<text class="mathMagrin">{{item.totalObject.relayTotal}}</text></view>
						<view class="noWidthBtn" @click.stop="btnOper('only',item)">已委托<text class="mathMagrin">{{item.totalObject.entrustTotal}}</text></view>
					</view>
					<view class="flex alignCenter flexWrap operBtn otherBtn" v-if="activeTab>0">
						<view class="noWidthBtn" v-if="(activeTab<3 && item.state!=3)" @click.stop="btnOper('share',item)">接力找人</view>
						<view class="noWidthBtn" v-if="(activeTab==1 && item.state!=3)" @click.stop="btnOper('share',item)">揭榜</view>
						<view class="flex font14 alignCenter justConEnd" v-if="(activeTab==3 && item.state>=2 && item.unveiledUserPhone)" @click.stop="connectHim(item)">
							<uni-icons class="focusMargin" color="#ff9900" type="phone" size="18"></uni-icons>
							<text class="colorLightOrange">{{item.unveiledUserPhone}}</text>
						</view>
					</view>
				</view>
				<image class="chooseImg" src="@/static/image/icons/cr.png" mode="widthFix" v-if="(activeTab==3 && item.state>=2)"></image>
			</view>
		</template>
		<!-- 找人按钮 -->
		<view class="flex alignCenter findBtn" @click="operClick('add')">
			<view class="">
				<image src="@/static/image/setting/major.png" mode="widthFix"></image>
				<view class="font12">找人</view>
			</view>
		</view>
		<uni-nodata v-if="listData.length==0" :iconStyle="{'margin':'100rpx 0 0'}"></uni-nodata>
	</view>
</template>

<script>
	import { findPeople,offFound } from "@/api/mine.js"
	export default {
		data() {
			return {
				activeTab:0,
				tabArr:[{
					title:'我找人'
				},{
					title:'委托我'
				},{
					title:'我接力'
				},{
					title:'我接榜'
				}],
				page:1,
				pageSize:10,
				pageTotal:0,
				listData:[]
			}
		},
		onLoad() {
			this.getTabList()
		},
		methods: {
			initPage(){
				this.page=1;
				this.listData=[]
			},
			// 根据tab获取数据
			getTabList(){
				let param={
					page:this.page,
					size:this.pageSize,
					userId:uni.getStorageSync('userId'),
					foundPersonType:this.activeTab+1
				}
				findPeople(param).then((res)=>{
					if(res.code==100000){
						this.listData=this.listData.concat(res.data.rows)
						this.pageTotal=Math.ceil(res.data.total/this.pageSize)
					}
				})
			},
			tabChangeSuccess(obj){
				console.log('obj',obj)
				this.activeTab=obj.activeTab
				this.initPage()
				this.getTabList()
			},
			operClick(type,item){
				if(type=='off'){
					// TO DO
					// uni.showToast({
					// 	title:'开发中，敬请期待！',
					// 	icon:'none'
					// })
					uni.showModal({
						title: '提示',
						content: '下架后委托金额会原路返回，该数据将不再展示，是否确定下架？',
						success: (res)=> {
							if (res.confirm) {
								offFound({personId:item.id}).then((res2)=>{
									if(res2.code==100000){
										this.initPage()
										this.getTabList()
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}else if(type=='edit'){
					// 编辑
					uni.navigateTo({
						url:'/pages/send/lookFor/publishPeople/publishPeople?type=2&editId='+item.id
					})
				}else if(type=='add'){
					uni.navigateTo({
						url:'/pages/send/lookFor/publishPeople/publishPeople?type=2'
					})
				}
			},
			btnOper(type,item){
				if(type=='receive' || type=='share' || type=='detail'){
					uni.navigateTo({
						url:`/pages/send/lookFor/lookHomepage/lookHomepage?id=${item.id}&activeTab=${type=='receive'?1:0}`
					})
				}else{
					// 委托
					uni.navigateTo({
						url:'/pages/mine/entrustList/entrustList?id='+item.id
					})
				}
			},
			// 拨打电话
			connectHim(item){
				uni.makePhoneCall({
					phoneNumber: item,
					success(res) {
						console.log('打电话成功',res)
					},
					fail(err) {
						console.log('打电话失败',err)
					}
				});
			}
		},
		onPullDownRefresh() {
			this.initPage()
			this.getTabList()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		},
		onReachBottom() {
			if(this.page<this.pageTotal){
				++this.page
				this.getTabList()
			}else{
				uni.showToast({
					title:'我也是有底线的',
					icon:'none'
				})
			}
		}
	}
</script>
<style lang="scss">
@import "@/static/public.scss";	
page{
	background-color:$pageBgColor;
}
</style>
<style scoped lang="scss">
.findPeople{
	padding: 0 30rpx;
	box-sizing: border-box;
}
.peopleOne{
	padding: 0 0 30rpx;
	box-sizing: border-box;
	background:#fff;
	position: relative;
	// margin:60rpx 0 0;头像往上跑的关联样式
	margin:30rpx 0 0;
	// border-radius: 20rpx;
	border-radius: 0 0 24rpx 24rpx;
	z-index: 2;
	.chooseImg{
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		right: 0;
		top: 0;
	}
	.info{
		// padding: 0 30rpx 0; 头像会往上跑的关联样式
		padding: 30rpx 30rpx 0;
		.avater{
			width: 112rpx;
			height: 112rpx;
			border-radius: 50%;
			// margin:-60rpx 20rpx 0 0; 头像会往上超出一部分的样式
			margin:0 20rpx 0 0;
			box-sizing: border-box;
			// box-shadow: 0 1px 15rpx rgba(0,0,0,.3);
			image{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.intro{
			margin:30rpx 0;
		}
		.infoName{
			flex:1;
		}
		.editBox{
			flex-shrink: 0;
			.noWidthBtn{
				background: #f2f2f2;
				margin-left: 20rpx;
			}
			image{
				width: 50rpx;
				height: 50rpx;
				margin-left: 10rpx;
			}
		}
		.findTitle{
			margin:10rpx 0;
			.colorRed{
				flex-shrink: 0;
			}
		}
		.tag{
			&>text{
				margin:0 20rpx 0 0;
			}
		}
		.operBtn{
			margin:40rpx 0 0;
			.noWidthBtn{
				margin-right: 20rpx;
			}
			.justConEnd{
				width: 100%;
				box-sizing: border-box;
			}
		}
		.noClickBtn{
			.noWidthBtn{
				background: $colorMainOper;
			}
		}
		.otherBtn{
			.noWidthBtn{
				width:200rpx;
				padding:8rpx 0;
				text-align: center;
				box-sizing: border-box;
			}
			.noWidthBtn:nth-child(1){
				background: $colorblue;
			}
		}
	}
}
.findBtn{
	position: fixed;
	right:30rpx;
	bottom: 200rpx;
	width: 112rpx;
	height: 112rpx;
	background:rgba(102, 102, 102, .66);
	border-radius: 50%;
	text-align: center;
	color: #fff;
	z-index:20;
	&>view{
		margin: 0 auto;
	}
	image{
		width: 48rpx;
		height: 48rpx;
		display: block;
		margin: 0 auto;
	}
}
</style>

